<!DOCTYPE html>
<html lang="zh-CN">
  <head>
	<title>html模拟之CSDN</title>
	<link rel="stylesheet" href="csdn_blog.css">
  </head>

  <body>
	<div id="container">
	  <aside>
		<div id="aside-profile">
		  <div id="aside-profile-info" style="display: flex; align-items: center">
			<div id="profile-img">
			  <a href="https://www.baidu.com">
				<img src="https://avatar.csdn.net/1/E/F/3_kkae8643150.jpg" class="avatar-pic">
			  </a>
			</div>
			<span style="margin-left: 5px;">狂奔的CD</span>
			<div style="flex-grow: 1"></div>
			<a href="https://www.baidu.com" style="text-decoration: none">
			  <span style="border: 1px solid red; border-radius: 3px; color: red; margin-right: 10px;">关注</span>
			</a>
		  </div>
		  <div id="aside-data-info">
			<dl>
			  <dt>
				<a href="https://www.baidu.com">
				  <p>原创</p>
				</a>
			  </dt>
			  <dd>
				<span>69</span>
			  </dd>
			</dl>
			<dl>
			  <dt>
				<a href="htts://www.baidu.com">粉丝</a>
			  </dt>
			  <dd>
				<span>68</span>
			  </dd>
			</dl>
			<dl>
			  <dt>
				<a href="htts://www.baidu.com">喜欢</a>
			  </dt>
			  <dd>
				<span>42</span>
			  </dd>
			</dl>

			<dl>
			  <dt>
				<a href="https://www.baidu.com">评论</a>
			  </dt>
			  <dd>
				<span>41</span>
			  </dd>
			</dl>
		  </div>

		  <div id="grade-box">
			<dl>
			  <dt>等级:</dt>
			  <dd>博客4级</dd>
			</dl>
		  </div>
		</div>

		<div id="asideNewArticle">
		  <h3 class="aside-title">最新文章</h3>

		  <div class="aside-content">
			<ul>
			  <li>《effective java》读书笔记2(对所有对象都通用的方法)</li>
			  <li>《深入理解java虚拟机》读书笔记3(垃圾收集器与内存策略分配)</li>
			  <li>《深入理解java模拟机》读书笔记2(java内存区域与OOM)</li>
			  <li>《effective java》读书笔记1(创建和销毁对象) </li>
			  <li>《深入理解Java虚拟机》读书笔记1(走进java)</li>
			</ul>
		  </div>
		  最新文章
		</div>
	  </aside>

		
		<div id="right">
		  <p>This is Right</p>
		</div>

		<main>
		  <div id="blog-content-area">

			<div id="blog-header-box">
			  <span class="article-type">原</span>
			  <h1>html 实战之一 </h1>
			</div>

			<div id="article-info-box">
			  <span class="article-time">2016年09月06日 19:37:35</span>
			  <a class="follow-nickname" href="https://www.baidu.com" target="_blank">狂奔的CD</a>
			  <span class="article-read-num">阅读数: 12334</span>
			  <span class="article-info-click">更多</span>
			</div>
			<hr />
			<p>参照一般Blog的样子， 做个超简易版, 先秀一下样子</p>
			<img src="https://img-blog.csdn.net/20160907165041355?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="html1"></img>

			<p>表示没有文本， 需要很很长的文本， 设置行高, 明月天涯刀 </p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>
			<p>4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪</p>

			<div id="bottom">
			  <a>收藏</a>
			  <a>分享</a>
			</div>
		  </div>
		</main>
	</div>
  </body>
</html>
